<template>
  <div class="company-announces">
    <div class="top">
      <a-card>
        <h2>最新消息</h2>
        <a-divider />
        <div class="content">
          <div class="content-item" v-for="(item,index) in recentList" :key="index" @click="downloadItem(item.filename)">
            <BellOutlined />{{item.filename.split('.')[0]}}
          </div>
        </div>
      </a-card>
      <a-card>
        <h2>公司通知 共{{total}}条</h2>
        <a-divider />
        <div class="content">
          <div class="content-item" v-for="(item,index) in list" :key="index" @click="downloadItem(item.filename)">
            <BellOutlined />
            {{item.filename}}
          </div>
        </div>
      </a-card>
    </div>

    <div class="bottom">
      <a-carousel autoplay>
        <div v-for="(item,index) in recentList" :key="index">
          <h3 @click="downloadItem(item.filename)">{{item.filename.split('.')[0]}}</h3>
        </div>
      </a-carousel>
      <a-upload action="http://localhost:3000/upload/file" @change="upload" v-if="character=='admin'">
        <a-button type="primary">上传公告</a-button>
      </a-upload>
    </div>

  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";

import { BellOutlined } from "@ant-design/icons-vue";
import { file, log } from "../../service/index";
import { result } from "../../utils/result";
import store from "../../store/index";
export default defineComponent({
  components: {
    BellOutlined,
  },

  setup() {
    const character = ref("");
    onMounted(() => {
      character.value = store.state.userCharacter.name;
    });
    const onChange = (a, b, c) => {
      console.log(a, b, c);
    };
    const downloadItem = (param) => {
      console.log("打印param", param);
      window.open(`http://localhost:3000/download/file/${param}`, "_blank");
    };

    const list = ref([]);
    const total = ref(0);
    const recentList = ref([]);
    //upload/add 添加文件请求  文件名、时间
    const getList = async () => {
      console.log("upload");
      const res = await file.list();
      if (res.data.code = 200) {
        list.value = res.data.data.list;
        total.value = res.data.data.total
        recentList.value = list.value.slice(0, 3);
      }
      // result(res).success(({ data }) => {
      //   console.log("data", data);
      //   list.value = data.list;
      //   total.value = data.total;

      //   recentList.value = list.value.slice(0, 3);
      //   console.log("recent", recentList.value, "list", list.value);
      // });
    };
    onMounted(() => {
      getList();
    });

    const upload = () => {
      getList();
    };
    //  const getUser = async () => {
    //   const res = await user.list(curPage.value, 10, keyword.value);
    //   result(res).success(({ data: { list: resList, total: resTotal } }) => {
    //     list.value = resList;
    //     total.value = resTotal;
    //   });
    // };
    return {
      onChange,
      downloadItem,
      upload,
      getList,
      list,
      total,
      recentList,
      character, //当前用户角色
    };
  },
});
</script>

<style lang="less" scoped>
.company-announces {
  .top {
    display: flex;
    align-items: center;
    :deep(.ant-card) {
      flex: 1;
    }
    :deep(.ant-card:nth-child(1)) {
      margin-right: 10px;
    }
    .content {
      height: 100px;
      overflow-y: auto;
    }
  }
  .bottom {
    width: 100%;
    margin-top: 20px;
    display: flex;
    :deep(.ant-carousel) {
      width: 800px;
      margin-right: 10px;
    }
    :deep(.ant-carousel .slick-slide) {
      text-align: center;
      height: 160px;
      line-height: 160px;
      background: #364d79;
      overflow: hidden;
    }

    :deep(.ant-carousel .slick-slide h3) {
      color: #fff;
    }
  }
}
</style>